<template>
  <div class="app-container">
    <!-- v-permission="['airReports:dayMonth:read']" -->
    <div class="head">
      <el-row>
        <el-col :span="1">
          <el-button :style="{ display: visibleSubmit }" class="filter-item" type="primary" icon="el-icon-back" @click="handleFilter(2,null,null)"/>
        </el-col>
        <el-col :span="fsizecom">
          <h2 align="center">{{ yearMonth }} {{ fsiteName }} 空气质量</h2>
        </el-col>
      </el-row>
    </div>
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-date-picker v-model="month" type="month" clearable class="filter-item" placeholder="选择月"/>
      <el-button class="filter-item" :style="{background:buttonColor.lookup,color:buttonColor.color}" icon="el-icon-search" @click="handleFilter(3,null,null)">查找</el-button>
    </div>
    <div class="list">
      <div class="uni-flex uni-row off" style="min-height: 2rem;">
        <div class="text1">地区</div>
        <div class="text2">AQI</div>
        <div class="text2">空气类别</div>
        <div class="text2">首要污染物</div>
      </div>
      <div v-for="(item,index) in dataList" v-show="(userifo.fsiteLevel + tier) !== 4" :class="[index%2===0 ? 'on' : 'off']" :key="item.fsiteNo" class="uni-flex uni-row uni-body" @click="handleFilter(1,item.fsiteNo,item.fsiteName)">
        <div class="text1">{{ item.fsiteName != null ? item.fsiteName : item.fpointName }}</div>
        <div class="text2">{{ item.faqi|intFielter }}</div>
        <div class="text2">{{ item.faqiType|emptyFielter }}</div>
        <div class="text2">{{ item.fcontaminants|emptyFielter }}</div>
      </div>
      <div v-for="(item,index) in dataList" v-show="(userifo.fsiteLevel + tier) === 4" :class="[index%2===0 ? 'on' : 'off']" :key="item.fsiteNo" class="uni-flex uni-row">
        <div class="text1">{{ item.fsiteName != null ? item.fsiteName : item.fpointName }}</div>
        <div class="text2">{{ item.faqi|intFielter }}</div>
        <div class="text2">{{ item.faqiType|emptyFielter }}</div>
        <div class="text2">{{ item.fcontaminants|emptyFielter }}</div>
      </div>
    </div>

    <div>
      <div id="myChart" :style="{width: '1100px', height: '500px'}"/>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import {buttonColor} from '@/filters/index'
var fsiteNo2 = null
var fsiteName2 = null
var urlStr = ''

export default {
  name: 'Area',
  data() {
    return {
      buttonColor:buttonColor,
      tier: undefined,
      userifo: undefined,
      month: this.beforeMonth(),
      fsiteName: '',
      visibleSubmit: 'none',
      dataList: null,
      listQuery: {
        month: undefined,
        fsiteNo: undefined
      }
    }
  },
  computed: {
    yearMonth() {
      var date = new Date(this.month)
      var ym
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      if (m < 10) {
        m = '0' + m
      }
      ym = '' + y + m
      return ym
    },
    fsizecom() {
      return this.visibleSubmit === 'none' ? 22 : 20
    }
  },
  created() {
    this.userifo = this.$store.state.user
    this.handleFilter(0, this.userifo.fsiteNo, this.userifo.fsiteName)
  },
  methods: {
    handleFilter: function(ffrom, fsiteNo, fsiteName) { // ffrom 0：刚进页面，1：进入行，2：返回，3：查询
      if (ffrom === 0) { // 刚进页面
        this.tier = 1
        this.visibleSubmit = 'none'
      } else if (ffrom === 1) { // 进入行
        if ((this.userifo.fsiteLevel + this.tier) === 4) { // 学校层不能进入行
          return
        }
        this.tier += 1
        if (this.tier === 2) {
          fsiteNo2 = fsiteNo // 记录第二层的条件
          fsiteName2 = fsiteName // 记录第二层的条件
        }
        this.visibleSubmit = ''
      } else if (ffrom === 2) { // 返回
        this.tier -= 1
        if (this.tier === 1) {
          this.visibleSubmit = 'none'
        }
      }
      if ((this.userifo.fsiteLevel + this.tier) === 4) { // 学校层请求地址不一样
        urlStr = '/airReport/getMonthAirDataThree'
      } else {
        urlStr = '/airReport/getMonthAirData'
      }
      if (fsiteNo === null) {
        if (this.tier === 2) { // 如果是第二层就用第二层的条件
          this.listQuery.fsiteNo = fsiteNo2
          this.fsiteName = fsiteName2
        } else {
          this.listQuery.fsiteNo = this.userifo.fsiteNo
          this.fsiteName = this.userifo.fsiteName
        }
      } else {
        this.listQuery.fsiteNo = fsiteNo
        this.fsiteName = fsiteName
      }
      this.listQuery.month = this.yearMonth
      listAir(this.listQuery)
        .then(response => {
          this.dataList = response.data.data.list
          // this.showChartPie()
        })
        .catch(() => {
          this.dataList = []
        })
      listAirLine(this.listQuery)
        .then(response => {
          const categories = response.data.data.list.map(function(item) {
            return item.fday
          })
          const datas = response.data.data.list.map(function(item) {
            return item.faqi
          })
          this.showChartPie(categories, datas)
        })
        .catch(() => {
          this.categories = []
          this.datas = []
        })
    },
    showChartPie(categories, datas) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: 'AQI',
          left: 'center'
        },
        xAxis: {
          name: '日期',
          type: 'category',
          data: categories
        },
        yAxis: {
          type: 'value'
        },
        series: {
          data: datas,
          type: 'line',
          color: '#1C86EE',
          label: {
            show: true
          }
        },
        tooltip: {
          trigger: 'axis'
        }
      })
    },
    beforeMonth() {
      var a = new Date()
      var d = a.getDate()
      var yy = a - 1000 * 60 * 60 * 24 * d
      return new Date(yy)
    }
  }
}
export function listAir(query) {
  return request({
    url: urlStr,
    method: 'get',
    params: query
  })
}
export function listAirLine(query) {
  return request({
    url: '/airReport/getMonthLineChart',
    method: 'get',
    params: query
  })
}
</script>

<style>
  .text1 {
    width: 500px;
    color: #000000;
    text-align: center;
    height: 70px;
    line-height: 70px;
  }

  .text2 {
    width: 350px;
    color: #000000;
    text-align: center;
    height: 70px;
    line-height: 70px;
  }
  .on {
    background: #54d6e3;
  }

  .off {
    background: #55cdd9;
  }

  .list {
    padding-bottom: 30px;
    box-sizing: border-box;
    flex: 1;
    flex-direction: column;
    display: flex;
    padding-top: 10px;
    height: 40%;
    flex: 2;
    text-align: left;
  }
  .uni-row {
    flex-direction: row;
  }
  .uni-flex {
    display: flex;
    flex-direction: row;
  }
  .uni-body div:hover{
    color: blue;
    text-decoration: underline;
  }
</style>
